<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle">
      <div>
        <span>已选品类</span>
        <span>({{ resultList.length }})</span>
      </div>
      <BtnRender :render="renderBtnsBar" />
    </el-row>
    <SeniorLinkedDialog
      ref="seniorRef"
      :visible.sync="seniorLinked.visible"
      :columns="seniorLinked.columns"
      :dataSource="seniorLinked.dataSource"
      @seniorSearchResult="getSeniorSearchResult"
    />
  </div>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import SeniorLinkedDialog from '@/components/SeniorLinkedDialog';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
export default {
  components: {
    BtnRender,
    SeniorLinkedDialog,
  },
  props: {
    resultList: { // 结果集合
      type: Array,
      default: () => [],
    },
    confirmLoading: { // 确定按钮loading
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      seniorLinked: {
        visible: false,
        columns: [{ label: '品类ID', prop: 'categoryUuid', type: 'textarea' }],
        dataSource: [{ categoryUuid: '' }],
      },
    }
  },
  computed: {
    // 没有结果
    hasNoResult () {
      return this.resultList.length == 0
    },
  },
  methods: {
    // 渲染按钮
    renderBtnsBar (h) {
      const btns = [
        {
          label: '高级关联',
          method: this.handleSeniorAssociate,
        },
        {
          label: '一键清空',
          disabled: this.hasNoResult,
          method: this.handleClear,
        },
        {
          label: '确定',
          loading: this.confirmLoading,
          method: this.handleConfirm,
        },
      ]
      return getListPageBtnsBar(h, btns, null, 'end', { type: 'text', size: 'mini' })
    },
    // 清空
    handleClear () {
      this.$emit('clear')
    },
    // 确定
    handleConfirm () {
      this.$emit('confirm')
    },
    // 高级关联
    handleSeniorAssociate () {
      this.seniorLinked.visible = true
    },
    // 获取高级关联结果
    getSeniorSearchResult (data) {
      this.$emit('senior', data)
    },
    // 清空高级关联内容
    clearSeniorLinked () {
      this.$refs.seniorRef.handleClearAll()
    },
  }
}
</script>
